import React from 'react';
import AppBar from '../../components/AppBar';
import { Formik, Form, Field } from 'formik';
import { editReceiveInfo, info } from '../../api/customer'

export class EditReceiveInfo extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            loc: '',
            name: '',
            phone: '',
            loading: true
        }
    }

    componentDidMount() {
        info((result) => {
            let info = JSON.parse(result.receiveInfo)[0]

            if (info) {
                this.setState({
                    loc: info.location,
                    name: info.rname,
                    phone: info.rphone,
                    loading: false
                })
            } else {
                this.setState({
                    loading: false
                })
            }
        })
    }

    render() {
        if (this.state.loading) {
            return (
                <div>
                    <AppBar></AppBar>
                    Loading...
                </div>
            );
        } else {
            return (
                <div>
                    <AppBar></AppBar>
                    <Formik
                        onSubmit={(value, actions) => {
                            editReceiveInfo([{ location: value.loc, rname: value.name, rphone: value.phone }])
                            actions.setSubmitting(false)
                        }}
                        initialValues={{
                            loc: this.state.loc,
                            name: this.state.name,
                            phone: this.state.phone
                        }}
                        render={({ errors, status, touched, isSubmitting }) => (
                            <div className="container">
                                <Form>
                                    <div className="form-group">
                                        <label htmlFor="loc">收货地址</label>
                                        <Field className="form-control" id="loc" name="loc" type="text" required />
                                    </div>
                                    <div className="form-group">
                                        <label htmlFor="name">收货人姓名</label>
                                        <Field className="form-control" id="name" name="name" type="text" required />
                                    </div>
                                    <div className="form-group">
                                        <label htmlFor="phone">收货人电话</label>
                                        <Field className="form-control" id="phone" name="phone" type="tel" required />
                                    </div>
                                    <button type="submit" className="btn btn-lg btn-block btn-danger" disabled={isSubmitting}>保存</button>
                                </Form>
                            </div>
                        )}
                    />
                </div>
            );
        }
    }
}